<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="首页"
      color="#fff"
    ></fui-nav-bar>
    <view class="warp">
      <view class="nav">
        <view class="nav_item">
          <view class="nav_count">{{ statistics.total }}</view>
          <view class="nav_title">设备总数</view>
        </view>
        <view class="nav_item">
          <view class="nav_count">{{ statistics.fault }}</view>
          <view class="nav_title">故障设备</view>
        </view>
        <view class="nav_item">
          <view class="nav_count">{{ statistics.unrepair }}</view>
          <view class="nav_title">未修复故障</view>
        </view>
      </view>

      <view class="port">
        <view class="port_A">
          <fui-section title="代办任务" isLine></fui-section>
          <view class="ul">
            <view class="port_item">
              <view class="port_count">{{ statistics.toAudit }}</view>
              <view class="port_content">待审核</view>
            </view>
            <view class="port_item">
              <view class="port_count">{{ statistics.toReceive }}</view>
              <view class="port_content">待接单</view>
            </view>
            <view class="port_item">
              <view class="port_count">{{ statistics.toExecute }}</view>
              <view class="port_content">待执行</view>
            </view>
            <view class="port_item">
              <view class="port_count">{{ statistics.toVerify }}</view>
              <view class="port_content">待验证</view>
            </view>
          </view>
        </view>

        <view class="port_A">
          <fui-section title="故障报修" isLine></fui-section>
          <view class="content_box">
            <view class="item" @click="malfunction">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">设备报修</view>
            </view>
            <view class="item" @click="warranty">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">报修审核</view>
            </view>
            <view class="item" @click="dispatching">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">工单派工</view>
            </view>
            <view class="item" @click="dispatching">
              <!-- <image class="image" src="/static/images/institution/doctor.png" mode=""></image>
              <view class="content_title">工单派工</view> -->
            </view>
          </view>
        </view>

        <view class="port_A">
          <fui-section title="设备维修" isLine></fui-section>
          <view class="content_box">
            <view class="item" @click="repairworkorder">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">报修工单</view>
            </view>
            <view class="item" @click="quick">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">快速工单</view>
            </view>
            <view class="item" @click="validate">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">维修验收</view>
            </view>
            <view class="item" @click="validate">
              <!--      <image class="image" src="/static/images/institution/doctor.png" mode=""></image>
              <view class="content_title">维修验证</view> -->
            </view>
          </view>
        </view>

        <view class="port_A">
          <fui-section title="设备保养" isLine></fui-section>
          <view class="content_box">
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">报修工单</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">快速工单</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">维修验证</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">设备报修</view>
            </view>
            <view class="item">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">设备报修</view>
            </view>
          </view>
        </view>

        <view class="port_A">
          <fui-section title="人员" isLine></fui-section>
          <view class="content_box">
            <view class="item" @click="workerStatus">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">人员状态</view>
            </view>
            <view class="item" @click="dataBoard">
              <image
                class="image"
                src="/static/images/institution/doctor.png"
                mode=""
              ></image>
              <view class="content_title">数据看板</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getHomeData } from "@/pages/api/my/index.js";

// 统计数据
const statistics = ref({
  total: 0,
  fault: 0,
  unrepair: 0,
  toAudit: 0,
  toReceive: 0,
  toExecute: 0,
  toVerify: 0,
});

// 获取首页数据
const getStatisticsData = async () => {
  try {
    const res = await getHomeData();
    if (res.code === 200 && res.success === true) {
      statistics.value = res.data;
    } else {
      uni.showToast({
        title: res.msg || "获取数据失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("获取首页数据失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  getStatisticsData();
});

const malfunction = () => {
  uni.navigateTo({
    url: "/subpkg_index/malfunctionRepair/index",
  });
};
const warranty = () => {
  uni.navigateTo({
    url: "/subpkg_index/warranty/index",
  });
};
const dispatching = () => {
  uni.navigateTo({
    url: "/subpkg_index/dispatching/index",
  });
};
const repairworkorder = () => {
  uni.navigateTo({
    url: "/subpkg_institution/repairworkorder/index",
  });
};
const quick = () => {
  uni.navigateTo({
    url: "/subpkg_institution/quick/index",
  });
};
const validate = () => {
  uni.navigateTo({
    url: "/subpkg_institution/validate/index",
  });
};

// 跳转人员状态
const workerStatus = () => {
  uni.navigateTo({
    url: "/subpkg_worker/workerStatus/workerStatus",
  });
};
// 跳转数据看板
const dataBoard = () => {
  uni.navigateTo({
    url: "/subpkg_worker/dataBoard/dataBoard",
  });
};
</script>

<style lang="scss" scoped>
page {
}
.warp {
  height: 100%;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  padding-bottom: 150rpx;
  .nav {
    background-color: #0052d9;
    height: 180rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 50rpx;
    box-sizing: border-box;
    .nav_item {
      text-align: center;
      color: #fff;
      .nav_count {
        font-size: 30rpx;
      }
      .nav_title {
        font-size: 22rpx;
      }
    }
  }
  .port {
    padding: 18rpx;
    .port_A {
      background-color: #fff;
      padding: 16rpx;
      border-radius: 10rpx;
      margin-bottom: 18rpx;
      .ul {
        display: flex;
        justify-content: space-between;
        padding: 0 24rpx;
        margin-top: 24rpx;
        .port_item {
          width: 130rpx;
          height: 90rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          border: 2rpx solid #ccc;
        }
      }
    }

    .content_box {
      display: flex;
      flex-wrap: wrap;
      padding: 0 60rpx;
      margin: 30rpx 0;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        height: 150rpx;
        width: 140rpx;
      }
      .image {
        height: 48rpx;
        width: 48rpx;
      }
      .content_title {
        font-size: 25rpx;
      }
    }
  }
}
</style>
